<!-- 关于我的-卡券组件 -->
<template>
	<u-row>
		<u-col span="10" offset="1" >
			<view class="coupon">
				<u-grid
					:border="false"
					@click="click"
					col="4"
				>
					<u-grid-item
						v-for="(baseListItem,baseListIndex) in baseList"
						:key="baseListIndex"
					>
						<u-icon
							:customStyle="{paddingTop:23+'rpx'}"
							:name="baseListItem.name"
							:size="30"
						></u-icon>
						<text class="grid-text">{{baseListItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			
		</u-col>
	</u-row>		
</template>

<script>
	export default {
		name:"coupon",
		data() {
			return {
				baseList: [{
								name: '../../static/icon/mine/daodianquan.png',
								title: '到店券'
							},
							{
								name: '../../static/icon/mine/waisongquan.png',
								title: '外送券'
							},
							{
								name: '../../static/icon/mine/songkaquan.png',
								title: '送卡券'
							},
							{
								name: '../../static/icon/mine/duihuanquan.png',
								title: '兑换券'
							}
						]
			};
		},
		methods: {
			click(name) {
			        
			}
		}
	}
</script>

<style lang="scss">
	.coupon{
		background-color: #fff;
		height: 150rpx;
		border-radius: 25rpx;
	}	
	.grid-text {
	        font-size: 14px;
	        color: #909399;
	        padding: 10rpx 0 20rpx 0rpx;
	        /* #ifndef APP-PLUS */
	        box-sizing: border-box;
	        /* #endif */
	}
</style>